<template>
  <div>
    <h1 style="border-bottom: 2px solid #00d9ff; color: #00d9ff">传统中医药</h1>
    <button @click="navigateToHome">回退</button>
    <div class="comment-medicine" v-for="item in medicineList" :key="item.id">
      <div style="padding: 90px 0px 12px 90px; position: relative;">
        <el-skeleton style="width: 240px" :loading="loading" animated>
          <template slot="template">
            <el-skeleton-item
              variant="image"
              style="width: 600px; height: 240px;"
            />
          </template>
          <template>
            <div class="image-container">
              <img
                :src="item.imageUrl"
                class="image"
                @click="detailInfoTranditionlMedincine(item.id)"
              />
            </div>
          </template>
          <div class="text">
            <p>{{item.name}}</p>
            <p>{{item.alias}}</p>
          </div>
          <el-link type="primary" @click="detailInfoTranditionlMedincine(item.id)" class="detail-link"><span>详情信息</span><i class="el-icon-arrow-right"></i></el-link>
        </el-skeleton>
      </div>
    </div>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="positionPage.currentPage"
        :page-size="positionPage.pageSize"
        layout="prev, pager, next"
        :total="positionPage.totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { TcMedicineClient } from '@/api/medicine'

export default {
  data () {
    return {
      loading: false,
      currentDate: '2021-06-01',
      positionPage: {
        currentPage: 1,
        pageSize: 5,
        totalCount: 10,
        queryString: ''
      },
      medicineList: {}
    }
  },
  mounted () {
    this.getDataMedicineList()
  },
  methods: {
    navigateToHome () {
      // 通过修改浏览器的历史记录而不是重新加载页面来返回首页
      window.history.back()
    },
    detailInfoTranditionlMedincine (id) {
      const frontToken = localStorage.getItem('ordinaryUserToken')
      // alert(frontToken)
      const backToken = localStorage.getItem('token')
      // alert(backToken)
      if (frontToken === null && backToken === null) {
        this.$eventBus.$emit('medicineDetails')// 触发事件 进入详情页 需要先登录 后台登陆后在查看详情页面就不需要再次登录
      } else {
        this.$router.push({
          name: 'traditionalChineseMedicineDetails',
          params: {
            id: id
          }
        })
      }
    },
    getDataMedicineList () {
      const classData = {
        currentPage: this.positionPage.currentPage,
        pageSize: this.positionPage.pageSize,
        queryString: this.positionPage.queryString
      }
      TcMedicineClient(classData).then(resp => {
        const data = resp.data
        this.positionPage.total = data.total
        this.medicineList = data.rows
        this.$nextTick(() => {
          this.initParticlesEffect()
        })
      }).catch(err => {
        this.handleAxiosError(err)
      })
    },
    handleSizeChange (pageSize) {
      this.positionPage.pageSize = pageSize
      this.getDataMedicineList()
    },
    handleCurrentChange (currentPage) {
      this.positionPage.currentPage = currentPage
      this.getDataMedicineList()
    },
    handleAxiosError (error) {
      // 检查是否是Axios的网络错误
      if (error.isAxiosError && error.response) {
        // 处理您的网络错误，例如显示用户友好的提示
        // this.$message.error('网络请求失败，请稍后重试')
        this.$notify({
          title: '网络请求失败',
          message: '网络请求失败，请稍后重试',
          type: 'error',
          offset: 100
        })
      } else {
        // 处理其他类型的错误
        // this.$message.error('网络请求失败，发生错误，请稍后重试')
        this.$notify({
          title: '网络请求失败',
          message: '网络请求失败，请稍后重试',
          type: 'error',
          offset: 100
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.comment-medicine {
  margin: 0 auto;
}
.image-container {
  display: flex;
  align-items: center;
}
.image {
  width: 100px;
  height: 100px;
  display: block;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
}
.image:hover {
  transform: scale(1.1);
}
.text {
  position: absolute;
  left: 209px;
  top: 0;
  width: 700px;
  margin: 80px auto;
}
p {
  text-align: justify;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.detail-link {
  font-size: 16px;
  position absolute
  float left;
  bottom 10px;
  span{
    color blue
  }
}

.block {
  margin: 12px auto;
  font-size 64px
}
</style>
